<template>ck
    <div class="menuModal">
        <n-modal :show-icon="false" v-model:show="showModal" preset="dialog" title="菜单添加" style="width:50%"
            :on-positive-click="submitCallback" :on-close="cancelCallback">
            <div class="modalBox">
                <n-form ref="formRef" label-placement="left" label-width="auto" require-mark-placement="right-hanging"
                    :style="{
                        maxWidth: '640px'
                    }">
                    <n-form-item label="父级菜单" path="inputValue">
                        <n-cascader :options="menusOtion" placeholder="请选择菜单" :default-value="getDataShow._id"
                            label-field="menuName" :check-strategy="checkStrategy" value-field="_id"
                            children-field="children" @update:value="handleUpdateValue" />
                    </n-form-item>
                    <n-form-item label="菜单类型" path="inputValue">
                        <n-space>
                            <n-radio name="basic-demo" @change="handleChange" value="menu"
                                :checked="checkedValueRef === 'menu'">
                                菜单
                            </n-radio>
                            <n-radio name="basic-demo" value="menuBtn" @change="handleChange"
                                :checked="checkedValueRef === 'menuBtn'">
                                按钮
                            </n-radio>
                        </n-space>
                    </n-form-item>
                    <n-form-item label="菜单名称" path="inputValue">
                        <n-input placeholder="请输入" v-model:value="formData.menuName" />
                    </n-form-item>
                    <n-form-item label="图标" path="inputValue" v-show="checkedValueRef === 'menu'">
                        <n-input placeholder="请输入" v-model:value="formData.icon" />
                    </n-form-item>
                    <n-form-item label="权限标识" path="inputValue">
                        <n-input placeholder="请输入" v-model:value="formData.mneuCode" />
                    </n-form-item>
                    <n-form-item label="路由地址" path="inputValue" v-show="checkedValueRef === 'menu'">
                        <n-input placeholder="请输入" v-model:value="formData.path" />
                    </n-form-item>
                    <n-form-item label="组件路径" path="inputValue" v-show="checkedValueRef === 'menu'">
                        <n-input placeholder="请输入" v-model:value="formData.commentPath" />
                    </n-form-item>
                    <n-form-item label="菜单状态" path="multipleSelectValue">
                        <n-radio name="basic-demo" @change="menuSatus" value="menuok" :checked="menuStuts === 'menuok'">
                            正常
                        </n-radio>
                        <n-radio name="basic-demo" value="menustatus" @change="menuSatus"
                            :checked="menuStuts === 'menustatus'">
                            停用
                        </n-radio>
                    </n-form-item>
                </n-form>
            </div>
            <template #action>
                <n-space>
                    <n-button @click="cancelCallback">取消</n-button>
                    <n-button type="info" :loading="formBtnLoading" @click="submitCallback">确定</n-button>
                </n-space>
            </template>
        </n-modal>
    </div>
</template>

<script lang="ts" setup>
import {h, ref, reactive, toRefs, defineExpose, onBeforeMount,Component } from 'vue'
import { menusAdd, menusList } from '../../../../api/menu.js'
import { TreeSelectOption,NIcon,useMessage  } from 'naive-ui'
// @ts-ignore
 const message = useMessage()

const props = defineProps({
    menuModal: Boolean,
    modalType: String,
    modalDta: Array
})
const menusOtion = ref([])
onBeforeMount(() => {
    menusList().then(res => {
        menusOtion.value = (formatData(res))
        menusOtion.value.unshift({
            menuName: "顶级菜单",
            menuType: 1,
            _id: 'dingji'
        })

    })
})


const formatData = (data) => {
    data?.forEach(element => {
        if (element.menuType !== 2) {
            formatData(element.children)
            if (element.action) {
                delete element.children
            }
        } else {
            delete element.children
        }
    })
    return data
}



const myEmit = defineEmits(['getMenuModal'])

const showModal = ref(props.menuModal)
const formBtnLoading = ref()
const state = reactive({
    formData: {
        menuName: '', //菜单名字
        mneuCode: '', //菜单标识
        path: '', //菜单路径
        icon:'',
        menuState: 1,//菜单状态 1 正常 2 禁用
        menuType: 1, //菜单类型 1 菜单 2 按钮
        commentPath: '', //组件路径
        parentId: [null],  //父id
        action: "add",
    },
    statusList: [
        {
            label: "禁用",
            value: "0"
        },
        {
            label: "启用",
            value: "1"
        }
    ]
})

let { formData, statusList } = toRefs(state)
let getDataShow = ref<any>({})

if (props.modalType !== 'add') {
    getDataShow.value = props.modalDta
}


// @ts-ignore
state.formData['parentId'] = getDataShow?.value._id
let checkStrategy = 'all'
if (props.modalType == 'edit') {
    // @ts-ignore
    state.formData = props.modalDta
}

const submitCallback = () => {
    if (props.modalType == 'add') {
        if (state.formData.parentId === undefined) {
            state.formData.parentId = [null]
        }
        menusAdd(state.formData).then(res => {
            message.success('添加成功')
            showModal.value = false
            myEmit('getMenuModal', 'add')
        })
        return
    }

    if (props.modalType == 'oneAdd') {
        menusAdd(state.formData).then(res => {
            message.success('添加成功')
            showModal.value = false
            myEmit('getMenuModal', 'oneAdd')
        })
        return
    }

    if (props.modalType == 'edit') {
        state.formData.action = 'edit'
        menusAdd(state.formData).then(res => {
            message.success('编辑成功')
            showModal.value = false
            myEmit('getMenuModal', 'oneAdd')
        })
        return
    }


}

const cancelCallback = () => {
    showModal.value = false
    myEmit('getMenuModal', 'add')
}

const checkedValueRef = ref<string | null>('menu')
const menuStuts = ref<string | null>('menuok')
const handleChange = (e) => {
    checkedValueRef.value = (e.target as HTMLInputElement).value
    if ((e.target as HTMLInputElement).value == 'menu') {
        state.formData.menuType = 1
        return
    }
    state.formData.menuType = 2
}

const handleUpdateValue = (
    value: string | number | Array<string | number> | null,
    option: TreeSelectOption | null | Array<TreeSelectOption | null>
) => {
    if (value === 'dingji') {
        state.formData.parentId = [null]
        return
    }
    state.formData.parentId = [value]
}
const menuSatus = (e) => {
    menuStuts.value = (e.target as HTMLInputElement).value
    if ((e.target as HTMLInputElement).value == 'menu') {
        state.formData.menuState = 1
        return
    }
    state.formData.menuState = 2
}


</script>